<template>
	<view class="expand-text">
		<text v-if="text.length>32 && showMore">{{ text.slice(0, maxLength) }}</text>
		<text v-else>{{ text }}</text>
		<block v-if="text.length>32">
		    <text class="ml-1">{{ showMore ? '...' : '' }}</text>
			<text class="main-color"  @click="toggle">{{ showMore ? '展开' : '收起' }}</text>
		</block>
	</view>
</template>

<script>
	export default {
		name: "ExpandText",
		props: {
			text: {
				type: String,
				default: ''
			},
			maxLength: {
				type: Number,
				default: 32
			}
		},
		data() {
			return {
				showMore: true
			};
		},
		methods: {
			toggle() {
				this.showMore = !this.showMore;
			}
		}
	}
</script>

<style scoped>
	.expand-text {
		line-height: 40rpx;
		text-wrap: nowrap
	}
</style>